<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-04-07 10:05:07
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-04-22 09:37:49
-->
<template >
  <div class="box_login">
    <!-- <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.cat_code"
      :label="item.cat_desc"
      :value="item.cat_code">
    </el-option>
  </el-select> -->
    <div class="img">
      <img :src='this.login' alt=""><br>
      <h1>用户登录</h1>
    </div>
    <div>

      <p style="color:aliceblue">User login</p>
      <br>
    </div>
    <div class="login">
      <input type="text" v-model.trim="userName"> <br>
      <input type="password" v-model.trim="password"><br>
    <div class="randstyle">
          <input  type="text" v-model.trim="randCode">
      <img @click="clicktab" src="/ally/randCodeImage?a=1650523328409" alt="" id="img">
    </div> <br> <br>
      <button @click="submitLoginForm">登录</button>
      <div class="pad">

      </div>
    </div>
    <div>

    </div>

  </div>
</template>

<script>
import axios from "axios";
import { Base64 } from 'js-base64'
import {getAllData} from '../utils/bpApi'

export default {

  data() {
    return {
      login: require('../assets/login.png'),
      userName: '',
      password: '',
      randCode:'',
      // str:{}
  
    }
  },
  

  methods: {

    // check(){
    //   const {password,userName,randCode}=this
    //   if(password==''){
    //     this.$message.error('密码不能为空')
    //   }

    // },
    clicktab(){
     axios.get('/ally/randCodeImage?a=1650523328409').catch( error => console.log(this.$message.error(error)))
     document.getElementById('img').src = '/ally/randCodeImage?a=1650523328409';
    },
    async submitLoginForm() {

      const params = new URLSearchParams() // 创建URLSearchParams数据对象
      //  params.append('userKey', 'D1B5CC2FE46C4CC983C073BCA897935608D926CD32992B5900') // 将请求字段追加到URLSearchParams对象中
       params.append('userName', this.userName) // 将请求字段追加到URLSearchParams对象中
      params.append('password', this.password)
      params.append('randCode', this.randCode)

  await getAllData(params).then(res=>{
        if (res.data.success) {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });

           window.localStorage.setItem('tokenStartTime',new Date().getTime())
          window.localStorage.setItem('token','123456789')
          this.$router.push('/home')
        } else {
              if (this.urse == '' || this.password == ''||this.randCode=='') {
                this.$message({
                  message: '账号或者密码不能为空',
                  type: 'warning'
                });
         }
         else{
               this.$message.error(res.data.msg);
         }
        }
  }).catch( error => console.log(this.$message.error(error)))

        //       Base64.encode(this.userName);//加密
        // Base64.decode(this.userName);//解密
        // console.log( Base64.encode(this.userName));
        // console.log( Base64.decode(this.userName));
}
  },

  created() {
     document.onkeydown = (e) => {
      e = window.event || e
      if (this.$route.path === '/login' && e.keyCode === 13) this.submitLoginForm()  // submitLoginForm() 为登录函数
    }
    
  },

   watch: {
    $route(to, form) {
      console.log(to, form)
      this.submitLoginForm()
    }
  },
}
</script>
<style lang="scss" >

 .randstyle{
    width: 100%;
    display: flex;
  }
.login {
  display: flex;
  flex-direction: column;
  align-items: center;

  input {
    width: 100%;
    height: 40px;
    border: none;
  }
 

  button {
    width: 70%;
    height: 40px;
    background: #348c77;
    border: none;
  }
}

.img {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  border-image: linear-gradient(#ccc, (0, 255, 98), #fff) 10 10;

  img {
    width: 60%;
  }

  h1,
  p {
    color: #fff;
  }
}

.box_login {
  /* padding: 0 0 15% 0; */
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-image: url('../assets/background.png');
  justify-content: center;
  background-size:100% 100%;
  position:fixed;
}

/* html,body{
  background: #3ca993;
} */


</style>
